<template>
    <el-dialog
      v-model="dialog.rolevisible"
      :title="props.title"
      width="30%"
      :rules="rules"
      @opened = "handleOpen"
      @closed="handleClose"
    >
    <el-form :model="form" ref="dialogFormRef" :rules="rules">
      <el-form-item label="角色名称" prop="roleName" >
        <el-input v-model="form.roleName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色描述" prop="desc" >
        <el-input v-model="form.desc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父级id" prop="parentid" >
        <el-input v-model="form.parentid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" prop="roleName" >
        <el-input v-model="form.status" autocomplete="off" />
      </el-form-item>
    </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog.rolevisible=false">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref ,reactive,onMounted} from 'vue'
  import {ElMessage} from 'element-plus'
  import userole from '../../store/role.js'
  import *as role from '../../api/role.js'
  import useroler from '../../store/role.js'
  import usedialog from '../../store/dialog.js'
  let dialog = usedialog()
  let roler = useroler()
  
  let props = defineProps({
    title:{
        type:String,
        default:''
        },
    action:{
        type:String,
        default:''
    }
    }
  )

let form = reactive({
    roleName:'',
    desc:'',
    parentid:'',
    status:''
    })
  let rules = reactive({
    roleName: { required: true, message: '用户名不能为空', trigger: 'blur' },
    desc: { required: true, message: '密码不能为空', trigger: 'blur' },
    parentid: { required: true, message: '城市不能为空', trigger: 'blur' },
    status: { required: true, message: '城市不能为空', trigger: 'blur' },
})

let handleOpen = ()=>{
 
}
let dialogFormRef = ref(null)

let handleOk = ()=>{
    dialog.rolevisible=false
    dialogFormRef.value.validate(async (vaild)=>{
    if(vaild){
      if(props.action == 'add'){
        try{
            let res = await role.addRoleApi(form)
            ElMessage.success('添加成功')
        }catch(error){
            ElMessage.error('添加失败')
            console.log(error);
        }
      }
     
    }else {

    }
   })
}

let handleClose=()=>{
    dialogFormRef.value.resetFields()
}

  </script>
  <style scoped>

  </style>
  